<details id="markdownDropdown" class="ml-3 group relative z-10 inline-block" data-heap-id="markdown-dropdown">
    <summary
      class="dropdown-base hover:bg-gray-50 dark:hover:bg-gray-900 inline-flex cursor-pointer items-center gap-0 py-1 pl-2 text-sm font-semibold transition-colors"
      data-heap-id="markdown-dropdown-toggle"
    >
      <span class="font-normal">Page options</span>
      <span class="icon-svg transition-transform group-open:rotate-180">
        {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
      </span>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </summary>

    <!-- Dropdown menu -->
    <div
      class="dropdown-base absolute right-0 z-50 mt-1 w-65 origin-top-right p-2 text-sm shadow-md [display:none] group-open:[display:block]"
      data-heap-id="markdown-dropdown-menu"
    >
      <button
        onclick="copyMarkdown()"
        data-heap-id="copy-markdown-button"
        class="sub-button"
      >
        <span class="icon-svg mt-[2px] text-base leading-none">
          {{ partial "icon" "content_copy" }}
        </span>
        <span class="icon-svg hidden mt-[2px] text-base leading-none">
          {{ partial "icon" "check_circle" }}
        </span>
        <div class="leading-tight">
          <div class="text-base">Copy page as Markdown for LLMs</div>
        </div>
      </button>

      <button
        onclick="viewPlainText()"
        data-heap-id="view-markdown-button"
        class="sub-button"
      >
        <span class="icon-svg mt-[2px] text-base leading-none">
          {{ partial "icon" "description" }}
        </span>
        <div class="leading-tight">
          <div class="text-base">View page as plain text</div>
        </div>
      </button>

      <button
        onclick="openInDocsAI()"
        data-heap-id="search-docs-ai-button"
        class="sub-button"
      >
        <span class="icon-svg mt-[2px] text-base leading-none">
          {{ partial "icon" "search" }}
        </span>
        <div class="leading-tight">
          <div class="text-base">Ask questions with Docs AI</div>
        </div>
      </button>
      {{ if eq hugo.Environment "production" }}
       <button
        onclick="openInClaude()"
        data-heap-id="search-docs-ai-button"
        class="sub-button"
      >
        <span class="icon-svg mt-[2px] text-base leading-none">
          {{ partial "icon" "/icons/claude.svg" }}
        </span>
        <div class="leading-tight">
          <div class="text-base">Open in Claude</div>
        </div>
      </button>
      {{ end }}

    </div>
  </details>

<script>
    function getCurrentPlaintextUrl() {
      const url = window.location.href.split("#")[0].replace(/\/$/, "");
      return `${url}/index.md`;
    }

    function copyMarkdown() {
      fetch(getCurrentPlaintextUrl())
        .then((response) => response.text())
        .then((text) => {
          navigator.clipboard.writeText(text).then(() => {
            const button = document.querySelector('[data-heap-id="copy-markdown-button"]');
            if (!button) return;

            const icons = button.querySelectorAll(".icon-svg");
            const copyIcon = icons[0];
            const checkIcon = icons[1];

            copyIcon.classList.add("hidden");
            checkIcon.classList.remove("hidden");

            setTimeout(() => {
              copyIcon.classList.remove("hidden");
              checkIcon.classList.add("hidden");
            }, 2000);
          });
        })
        .catch((err) => {
          console.error("Error copying markdown:", err);
        });
    }

    function viewPlainText() {
      window.open(getCurrentPlaintextUrl(), "_blank");
    }

    function openInDocsAI() {
      const kapaButton = document.querySelector(".open-kapa-widget");
      if (kapaButton) {
        kapaButton.click();
      } else {
        alert("Couldn't find Docs AI.");
      }
    }

    function openInClaude() {
      const markdownUrl = getCurrentPlaintextUrl();
      const prompt = `Read ${markdownUrl} so I can ask questions about it.`;
      const encodedText = encodeURIComponent(prompt);
      const claudeUrl = `https://claude.ai/new?q=${encodedText}`;
      window.open(claudeUrl, '_blank');
    }
  </script>
